import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store/store'
import Permission from './directive/permission'
import AFTableColumn from 'af-table-column'
import axios from 'axios'
import showTime from './components/showTime'
import showTime2 from './components/globalComp/index.js'
import cookies from 'js-cookie'
import SignCanvas from 'sign-canvas'
import vueEsign from 'vue-esign'
import * as echarts from 'echarts'
//导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import dayjs from 'dayjs'


import VueAMap from 'vue-amap'
import AMapLoader from '@amap/amap-jsapi-loader'

// 引入样式
// import 'vue-easytable/libs/themes-base/index.css'
// 导入 table 和 分页组件
// import {VTable,VPagination} from 'vue-easytable'

// 注册到全局
// Vue.component(VTable.name, VTable)
// Vue.component(VPagination.name, VPagination)

Vue.prototype.$http = axios
Vue.prototype.$echarts = echarts
Vue.prototype.$cookie = cookies
Vue.prototype.$dayjs = dayjs
Vue.prototype.$EventBus = new Vue() // 全局事件总线

Vue.config.productionTip = false
Vue.config.devtools = true

Vue.use(ElementUI)
Vue.use(Permission)
Vue.use(AFTableColumn)
Vue.use(showTime2, { color: 'blue' })
Vue.use(SignCanvas) // 使用签名
Vue.use(vueEsign) // 使用签名
Vue.use(VueQuillEditor) // 使用富文本编辑器
Vue.use(VueAMap) // 高德地图



/**
 * @description 自定义指令v-stretch（左右拉伸）
 * @param {String} direction
 */

Vue.directive('stretch', {
  bind(el, binding, vNode) {
    //  console.log(el, binding, vNode)
    if (el.querySelector('.stretch-wrap')) {
      const stretchWrap = el.querySelector('.stretch-wrap')
      const stretchDom = el
      let startX = 0 // 初始鼠标位置
      //通过指令传递的参数，判断是左拉伸还是右拉伸
      const direction = binding.arg
      stretchWrap.onmousedown = (e) => {
        // document.querySelector('center-container').style['pointer-events'] = 'auto'

        if (direction === 'right') {
          startX = e.clientX - stretchDom.offsetWidth
        } else if (direction === 'left') {
          startX = e.clientX + stretchDom.offsetWidth
        }
        document.onmousemove = function (e) {
          //  console.log(e)
          let newWidth = 0 // 拉伸后的宽度
          if (direction === 'right') {
            newWidth = e.clientX - startX
          } else if (direction === 'left') {
            newWidth = startX - e.clientX
          }
          stretchDom.style.cssText += `;flex-basis:${newWidth}px;`
        }
        document.onmouseup = function () {
          // document.querySelector('center-container').style['pointer-events'] = 'auto'
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  },
})


// 定义全局指令:修改颜色
Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})

Vue.component('showTime', showTime)

// 定义全局过滤器:首字母大写
Vue.filter('capi', function(str) {
  let result = str.toString().split(' ').map(item => {
    return item.charAt(0).toUpperCase() + item.slice(1)
  })
  return result.join(' ')
})

// 定义全局过滤器:格式化时间
Vue.filter('myFormatTime', function(time) {
// Tue Dec 13 2022 14:44:55 GMT+0800 (中国标准时间) {}
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
})

AMapLoader.load({
  key: '8bfbfbb89775708dea049f9529649b8c', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Driving', 'AMap.DragRoute', 'AMap.ToolBar', 'AMap.Scale']
}).then((AMap) => {
  Vue.prototype.$AMap = AMap
  console.log('AMap:', AMap)
  this.map = new AMap.Map('map', {
    viewMode: '2D', //  是否为3D模式
    zoom: 13, // 地图级别
    center: [114.268691, 30.401227], // 坐标
    resizeEnable: true
  })
}).catch((e) => {
  console.log(e)
})

new Vue({
  router, // 挂载到实例中
  store, // 注册 store
  render: h => h(App) // 渲染
}).$mount('#app')

